<template>
  <h5>toRef 的使用</h5>
  <h5>state:{{ state }}</h5>
  <h5>age:{{ age }}</h5>
  <h5>money:{{ money }}</h5>
  <button @click="update">更新数据</button>
  <ToRefChild :age="age"></ToRefChild>
</template>
<script lang='ts'>
  import { defineComponent, reactive, ref, toRef} from 'vue';
  import ToRefChild from './ToRefChild.vue'
  export default defineComponent({
    name:'ToRef',
    components:{ToRefChild},
    setup(){
      const state = reactive({
        age:5,
        money:100,
      })
      // 把响应式数据state里面的age属性变成ref对象了
      const age = toRef(state,'age')
      // 把响应式对象里面的某个属性，使用ref进行包装，变成ref对象
      const money = ref(state.money)
      const update = ()=>{
        // state.age+=2
        // age.value+=3
        money.value+=100
      }
      return{
        state,age,money,update
      }
    }
  })
</script>
<style scoped>
</style>